<template>
    <header class="layout-header">
        <header-logo />
        <div class="flex items-center">
            <header-menu v-if="userStore.isLogin" />
            <header-user />
        </div>
    </header>
</template>

<script setup lang="ts">
import useUserStore from '~/stores/user'
import HeaderLogo from './Logo.vue'
import HeaderMenu from './Menu.vue'
import HeaderUser from './User.vue'

const userStore = useUserStore()
</script>

<style scoped lang="scss">
.layout-header {
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    background-color: var(--el-bg-color);
}
</style>
